<template>
  <div class="listdetail">
    <!-- <van-card
      title="我喜欢的音乐"
      thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
    >
      <template #tags>
        歌曲:<van-tag>{{ mindlist.length }}</van-tag>
      </template>
    </van-card> -->
    <!-- <div
      class="back"
      :style="{ backgroundImage: 'url()' }"
    ></div> -->
    <div class="playcover">
      <div class="coverImgbox">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
          alt=""
          class="coverImg"
        />
      </div>
      <div class="covermsg">
        <h3>我喜欢的音乐</h3>
        <p class="playcount">
          歌曲:<span>{{ mindlist.length }}</span>
        </p>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <div
        class="mylist"
        v-for="(item, index) in musiclist"
        :key="item._id"
        @click="gosongDetail(item.id)"
      >
        <div class="mylistleft">
          <span class="index">{{ index + 1 }}.</span>
          <img :src="item.al.picUrl" alt="" />
          <div class="lmylist">
            <p>{{ item.name }}</p>
            <span>{{ item.ar.map(author).toString() }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      loading: false,
      finished: true,
      show: false,
      listdetail: [],
      list: [],
      musiclist: [],
      authorarr: [],
      mindlist: [],
      id: '',
    }
  },
  computed: {},
  watch: {},

  methods: {
    //跳转歌曲详情
    gosongDetail(id) {
      this.$router.push(`/songdetail/${id}`)
    },
    //获取我的喜欢音乐列表
    getmindmusic(id) {
      axios
        .get('http://localhost:3000/likelist', {
          params: {
            uid: id,
          },
        })
        .then((res) => {
          console.log(res, 666)
          if (res.status === 200) {
            this.mindlist = res.data.ids
            this.mindlist.forEach((v) => {
              this.getmusicurl(v)
            })
          }
        })
    },
    //歌手名
    author(v) {
      return v.name
    },
    onLoad() {},
    //通过获取到的歌曲ID获取歌曲详情
    getmusicurl(id) {
      axios
        .get('http://localhost:3000/song/detail', {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          // console.log(res, 99)
          if (res.data.code === 200) {
            const result = res.data.songs[0]
            this.authorarr = res.data.songs[0].ar
            this.musiclist.push(result)
            // console.log(this.musiclist, 555)
          }
        })
    },
  },
  created() {
    const id = this.$route.params.id
    this.id = id
    // console.log(id, 7979)
    this.getmindmusic(id)
  },
  mounted() {},
  components: {},
}
</script>
<style scoped>
.listdetail {
  padding: 15px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.playcover {
  display: flex;
  height: 125px;
  padding: 15px;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 99;
}
.back {
  width: 100%;
  height: 145px;
  box-sizing: border-box;
  position: absolute;
  top: 3px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  overflow: hidden;
  z-index: -1;
  opacity: 0.8;
}
.coverImgbox {
  border-radius: 15px;

  width: 120px;
  height: 100px;
  float: left;
  margin: 10px 0;
}
.coverImg {
  width: 100%;
  height: 100%;
}
.covermsg {
  float: left;
  margin: 10px 5px;
}
.covermsg h3 {
  height: 15px;
  line-height: 15px;
  padding: 5px 5px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  width: 180px;
}
.playcount {
  padding: 5px 5px;
  font-size: 14px;
}
.playcount span {
  font-size: 12px;
  color: #119abc;
}
.authormsg img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  float: left;
}
.authormsg span {
  float: left;
  font-size: 14px;
  color: #507daf;
  margin: 10px 5px;
}
.desc {
  font-size: 12px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  width: 180px;
  line-height: 18px;
  padding: 4px 5px;
  color: #676767;
}
.delete-button {
  height: 100%;
}
.mylist {
  padding: 10px;
  background-color: white;
  overflow: hidden;
}
.index {
  width: 20px;
  height: 26px;
  float: left;
  padding: 12px 0;
  color: #676767;
}
.mylistleft {
  float: left;
}
.mylistleft img {
  float: left;
  width: 50px;
  height: 50px;
}
.mylistleft .lmylist {
  float: left;
}
.mylistleft .lmylist p {
  width: 230px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  margin: 0 5px;
}
.mylistleft .lmylist span {
  float: left;
  font-size: 12px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
  width: 230px;
  color: #676767;
  margin: 0 5px;
}
</style>
